// tab
$(".top").find("div").click(function(){
    $(this).addClass("act").siblings().removeClass("act");
    $(".cont").find("li").css("display","none").eq($(this).index()).css("display","block");

})


// 全选功能
class allChoose{
    constructor(){
        this.check = $(".check").find("input");
        this.all = $(".cart-foot").find("input");
        this.addEvent();
    }
    addEvent(){
        var that = this;
        var bol = true;
        this.all.on("click",function(){
            if(bol){
                bol = false;
                for(var i=0;i<that.check.length;i++){
                    that.check[i].checked = true;
                }
            }else{
                bol = true;
                for(var i=0;i<that.check.length;i++){
                    that.check[i].checked = false;
                }
            }   
        })
        this.check.on("click",function(){
          that.some()  
        })
        this.some()  
    }
    some(){
        var a = true;
        for(var i = 0;i<this.check.length;i++){
            if(this.check[i].checked == false){
                a = false;
                break;
            }
        }
        this.all[0].checked = a;
    }
}



// 登录成功
class Index{
    constructor(){
        this.login = document.querySelector(".h_login");
        this.wel = document.querySelector(".wel");
        this.logout = document.getElementById("logout");
        this.uName = document.getElementById("userName");
        this.init();
        this.addEvent();
    }
    init(){
        var that = this;
        this.m = sessionStorage.getItem("userMsg");
        this.m = this.m ? JSON.parse(this.m) : {};
        if(this.m.user){
            this.login.style.display = "none";
            this.wel.style.display = "none";
            this.logout.style.display = "block";
            this.uName.style.display = "block";
            this.uName.innerHTML = this.m.user;
        }

    }
    addEvent(){
        this.logout.onclick = function(){
            sessionStorage.removeItem("userMsg");
            location.reload();
        }
    }
}
new Index;


// 获取数据渲染
class Car{
    constructor(){
        this.car_list = document.querySelector(".car_list");
        this.all = $(".cart-foot").find("input");
        this.clear = $(".cart-foot").find("a");
        this.num1 = document.querySelector(".num1");
        this.tot = document.querySelector(".tot");
        this.settlement = document.querySelector(".settlement")
        this.getData();
        this.addEvent();
    }
    getData(){
        if(sessionStorage.getItem("goodsMsg")){
            this.gm = JSON.parse(sessionStorage.getItem("goodsMsg"))
            // console.log(this.gm)
        }else{
            this.gm = [];
        }
        this.num1.innerHTML = this.gm.length;
        this.display()
    }
    display(){
        var str = "";
        var t = 0;
        for(var i=0;i<this.gm.length;i++){
            str +=`            
            <div class="list_main" index=${this.gm[i].goodsId}>
                <ul class="clear_fix">
                    <li class="check">
                        <input type="checkbox">
                    </li>
                    <li class="name">
                        <div class="name_p">
                            <a href="goodsDetail.html?id=${this.gm[i].goodsId}">
                                <img src="${this.gm[i].pic}" alt="">
                            </a>
                            <a href="goodsDetail.html?id=${this.gm[i].goodsId}" class="prod-name">${this.gm[i].name}</a>
                        </div>
                    </li>
                    <li class="attr">
                        <p>规格：${this.gm[i].specifications}</p>
                    </li>
                    <li class="price">
                        <span>${this.gm[i].price}</span>
                    </li>
                    <li class="count">
                        <div class="p_count">
                            <input type="number" value="${this.gm[i].num}" min="1" class="number">
                        </div>
                    </li>
                    <li class="total">
                        <span>${(this.gm[i].price * this.gm[i].num).toFixed(2) }</span>
                    </li>
                    <li class="action">
                        <p class="delete">删除</p>
                    </li>
                </ul>
            </div>`;
            t += parseFloat((this.gm[i].price * this.gm[i].num).toFixed(2));
        }
        this.tot.innerHTML = parseFloat(t).toFixed(2);
        this.car_list.innerHTML = str;
        new allChoose;
    }
    addEvent(){
        var that = this;
        this.car_list.onclick = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className === "delete"){
                // console.log(11)
                that.id = tar.parentNode.parentNode.parentNode.getAttribute("index");
                tar.parentNode.parentNode.parentNode.remove();
                that.changeData(function(i){
                    that.gm.splice(i,1);
                })
                that.num1.innerHTML = that.gm.length;
            }
        }
        this.car_list.oninput = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className === "number"){
                that.id = tar.parentNode.parentNode.parentNode.parentNode.getAttribute("index");
                that.changeData(function(i){
                    that.gm[i].num = tar.value;
                });
                var a = tar.parentNode.parentNode.nextElementSibling.children[0];
                var b = 0;
                b = tar.value * tar.parentNode.parentNode.previousElementSibling.children[0].innerHTML;
                a.innerHTML = b.toFixed(2);

                
            }
        }
        this.clear.click(function(){
            if(that.all[0].checked == true){
                that.gm = JSON.parse(sessionStorage.getItem("goodsMsg"))
                that.gm.splice(0,that.gm.length);
                $(".car_list").children().remove()
                console.log(that.car_list.children)
                that.num1.innerHTML = that.gm.length;
                sessionStorage.setItem("goodsMsg",JSON.stringify(that.gm))
                // console.log(that.gm)
            }
        })
        this.settlement.onclick = function(){
            alert("结算成功")
        }
    }
    changeData(cb){
        // console.log(this.id)
        for(var i=0;i<this.gm.length;i++){
            if(this.gm[i].goodsId === this.id){
                cb(i)
                break;
            }
        }
        this.num1.innerHTML = this.gm.length;
        sessionStorage.setItem("goodsMsg",JSON.stringify(this.gm))
    }
}
new Car();
